<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style type="text/css">
            .fdj{
                width:800px;
                height:600px;
                margin:0 auto;
                display: flex;
            }
            .left{
                width: 400px;
                height: 300px;
                background-image: url(timg.jfif);
                background-size: 100% 100%;
                position: relative;
            }
            .zhezhao{
                width: 200px;
                height: 150px;
                display: none;
                position: absolute;
                background:rgba(150,220,0, 0.7) ;
            }
            .right{
                width: 400px;
                height: 300px;
                display: none;
                background-image: url(timg.jfif);
                background-size: 200% 200%;
                background-position: 0 0;
            }
        </style>
    </head>
    <body>
        <div class="fdj">
            <div class="left">
                <div class="zhezhao"></div>
            </div>
            <div class="right"></div>
        </div>
        <script type="text/javascript">
            var fdj = document.querySelector(".fdj");
            var left = document.querySelector(".left");
            var zhezhao  = document.querySelector(".zhezhao");
            var right = document.querySelector(".right");

            left.onmouseenter = function(){
                zhezhao.style.display = "block";
                right.style.display = "block";
            }

            left.onmouseleave = function(){
                zhezhao.style.display = "none";
            }

            left.onmousemove = function(event){
                console.log(event);
                var x = event.pageX - 100 - fdj.offsetLeft;
                var y = event.pageY - 75 - fdj.offsetTop;
                if(x<0){
                    x=0;
                }
                if(x>200){
                    x=200;
                }
                if(y<0){
                    y=0;
                }
                if(y>150){
                    y=150;
                }
                zhezhao.style.left = x +"px";
                zhezhao.style.top = y +"px";

                right.style.backgroundPosition = (-x*2)+"px "+(-y*2)+"px";
            }

        </script>
    </body>
</html>